<template>
	<view class="edit-address">
		<UniNavBar :title="title" fixed="true" status-bar="true">
			<view slot="left" @click="handleBack"><i class="iconfont icon-left"></i></view>
		</UniNavBar>
		<view class="edit-content">
			<view class="edit-item">
				<text class="label">联系人：</text>
				<view class="values">
					<input type="text" placeholder="请填写收货人姓名" value="" />
				</view>
			</view>
			<view class="edit-item">
				<text class="label"></text>
				<view class="values">
					<radio-group v-model="fields.sex" @change="radioChange">
						<radio value="men" :checked="'men' === fields.sex">先生</radio>
						<radio value="women" :checked="'women' === fields.sex">女士</radio>
					</radio-group>
				</view>
			</view>
			<view class="edit-item">
				<text class="label">手机号：</text>
				<view class="values">
					<input type="text" placeholder="请填写收货人手机号" value="" />
				</view>
			</view>
			<view class="edit-item">
				<text class="label">收货地址：</text>
				<view class="values">
					<textarea placeholder="详细地址，例：16号楼5楼501" value="" />
					<i class="iconfont icon-set" @tap="handleOpen" style="font-size: 19px;color: #ccc;margin-left: 10rpx;" />
				</view>
			</view>
			<view class="search-city">
				<uni-combox label="所在城市" style="width: 100%;height: 40rpx;" :candidates="candidates" placeholder="请选择所在城市" v-model="city"></uni-combox>
			</view>
			<view class="edit-item">
				<text class="label">标签：</text>
				<view class="values">
					<view class="labels">
						<text @tap="handleSelect('家')" :class="fields.label === '家'?'active':''">家</text>
						<text @tap="handleSelect('公司')" :class="fields.label === '公司'?'active':''">公司</text>
						<text @tap="handleSelect('学校')" :class="fields.label === '学校'?'active':''">学校</text>
					</view>
				</view>
			</view>
			<view class="edit-submit" @tap="handleAdd">保存</view>
		</view>
	</view>
</template>

<script>
	import UniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
	import { openPosition, posToCity } from '@/utils/map'
	export default {
		name: 'edit-address',
		data () {
			return {
				msgType: '这是成功的消息',
				title: '',
				fields: {
					sex: 'men',
					label: '家',
					
				}
			}
		},
		components:{
			UniNavBar
		},
		mounted () {
			// openPosition()
			this.getCurLocation()
		},
		onLoad (props) {
			this.title = props.edit === '1' ? '编辑我的地址' : '新增我的地址'
		},
		methods: {
			dialogConfirm() {},
			handleOpen () {
				this.$refs.finish.open()
			},
			getCurLocation () {
				uni.getLocation({
					geocode:true,
					type: 'gcj02',
					success:async (res)=>{
					let { pois } = await posToCity(
						{
							latitude: res.latitude,
							longitude: res.longitude,
						},
					   1
					 );
					this.address = pois[0].title
					this.latitude = res.latitude
					this.longitude = res.longitude
					uni.setStorageSync('latitude',res.latitude)
					uni.setStorageSync('longitude',res.longitude)
					this.curAddress = store.state.address.curPickAddress.title
					}
				})
			},
			handleBack () {
				uni.navigateBack(1)
			},
			handleSelect (value) {
				this.fields.label = value
			},
			radioChange (value) {
				this.fields.sex = value.detail.value
			},
			handleAdd () {
				uni.navigateTo({
					url: '/pages/my-address/index'
				})
			}
		}
	}
</script>

<style scoped>
	.btn {
		transform: rotate(90deg)
	}
	.edit-content {
		padding: 20rpx;
	}
	.edit-item {
		display: flex;
		align-items: center;
		justify-content: left;
		margin-bottom: 30rpx;
	}
	.label {
		flex: 1;
		font-size: 30rpx;
		line-height: 55rpx;
	}
	.values {
		flex: 3;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.values input {
		font-size: 30rpx;
		line-height: 55rpx;
		height: 55rpx;
		color: #333333;
	}
	.values radio-group {
		font-size: 30rpx;
		line-height: 55rpx;
		height: 55rpx;
		color: #333333;
	}
	.values /deep/uni-radio .uni-radio-input {
		width: 30rpx!important;
		height: 30rpx!important;
		font-size: 24rpx;
	}
	.values /deep/uni-radio .uni-radio-wrapper {
		margin-right: 20rpx;
	}
	.edit-submit {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 80rpx;
		border-radius: 10rpx;
		background-color: #007AFF;
		color: #FFF;
		font-size: 30rpx;
	}
	.labels {
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 24rpx;
	}
	.labels text {
		display: inline-block;
		font-size: 24rpx;
		padding: 7rpx 14rpx;
		line-height: 24rpx;
		color: #333;
		border: 1px solid #999;
		margin-right: 28rpx;
		background-color: #FFFFFF;
		border-radius: 5rpx;
	}
	.active {
		border: 1px solid #007AFF !important;
		color: #FFFFFF !important;
		background-color: #007AFF!important;
	}
	.popup-content {
		background-color: #FFF;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popup-wrap {
		background-color: #FFFFFF;
	}
	
	.finish-popup {
		width: 70%;
	}		
	.popup-box {
	  text-align: center;
	  background-color: #fff;
	  padding: 30rpx;
	  border-radius: 10rpx;
	  font-size: 28rpx;
	}
</style>
